<template>
	<view class="user-contract">
		<view v-if="invoiceList.length > 0">
			<view
				class="user-contract-item"
				v-for="(item, index) in invoiceList"
				:key="index">
				<view class="user-contract-item-company">
					<view>发票对象：{{item.group === 1 ? '个人' : '企业'}}</view>
					<view>发票类型：{{item.type === 1 ? '电子发票':'纸质发票'}}</view>
				</view>
				<view class="user-contract-item-date">
					<view>联系人：{{item.contact}}</view>
					<view>开票状态：{{item.status_text}}</view>
					<view>订单号：{{item.order_no}}</view>
					<view>邮箱：{{item.email}}</view>
					<view v-if="item.status !== 0 && item.remark.AuditRemark">审核备注：{{item.remark.AuditRemark}}</view>
				</view>
				<view class="user-contract-item-btn" @click="pageTo('invoiceDetail?invoiceId=' + item.id)">查看详情</view>
			</view>
		</view>
		<view v-else class="no-data">
			<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
			无发票哦~
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				invoiceList: [],
				curPage: 1,
				pageSize: 6,
			}
		},
		onLoad() {
			this.gatInvoiceList()
		},
		methods: {
			/**
			 * 获取发票列表数据
			 */
			async gatInvoiceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/invoice/list',
					data: {
						page: this.curPage++,
						row: this.pageSize
					}
				})
				if (res.status === 1) {
					this.invoiceList = res.data.map(item => {
						item.remark = JSON.parse(item.remark)
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
		}
	}
</script>

<style lang="scss">
	.user-contract {
		padding-top: 30rpx;
		&-item{
			margin: 0 30rpx 30rpx;
			box-sizing: border-box;
			padding: 10rpx 30rpx 40rpx;
			border-top: 6rpx solid $uni-text-color-grey;
			background: $uni-bg-color;
			position: relative;
			&-company{}
			&-date{
				margin: 20rpx 0;
				color: $uni-text-color-grey2;
				font-size: $uni-font-size-sm2;
			}
			&-btn{
				height: 84rpx;
				width: 100%;
				line-height: 84rpx;
				text-align: center;
				background: $uni-color-theme;
				color: $uni-text-color-inverse;
			}
		}
	}
</style>
